<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水性漆调色助手</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #e74c3c, #f1c40f, #3498db, #2c3e50, #ecf0f1);
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 2.2rem;
        }
        
        .description {
            color: #7f8c8d;
            max-width: 600px;
            margin: 0 auto 20px;
        }
        
        /* 标签页样式 */
        .tabs {
            display: flex;
            margin-bottom: 25px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .tab {
            padding: 12px 25px;
            background: none;
            border: none;
            font-size: 16px;
            font-weight: 600;
            color: #7f8c8d;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        
        .tab.active {
            color: #3498db;
            border-bottom: 3px solid #3498db;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 调色器样式 */
        .input-section {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .color-input {
            flex: 1;
            min-width: 300px;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
        }
        
        .color-preview {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        input[type="number"], input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input[type="number"]:focus, input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .color-display {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            margin-bottom: 25px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            border: 5px solid white;
            transition: transform 0.3s;
        }
        
        .color-display:hover {
            transform: scale(1.05);
        }
        
        .rgb-display {
            font-size: 18px;
            font-weight: 600;
            background-color: white;
            padding: 10px 20px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .result-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 25px;
            margin-top: 20px;
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        .result-title {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
            font-size: 1.8rem;
        }
        
        .color-ratios {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .color-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 130px;
            padding: 15px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .color-item:hover {
            transform: translateY(-5px);
        }
        
        .color-swatch {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            margin-bottom: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .color-name {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 1.1rem;
        }
        
        .color-percentage {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .mixing-instructions {
            margin-top: 25px;
            padding: 25px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }
        
        .instructions-title {
            margin-bottom: 18px;
            color: #2c3e50;
            font-size: 1.4rem;
            text-align: center;
        }
        
        .instructions-list {
            padding-left: 25px;
        }
        
        .instructions-list li {
            margin-bottom: 12px;
            line-height: 1.7;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 20px;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
        }
        
        .btn:hover {
            background: linear-gradient(135deg, #2980b9, #3498db);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        /* 颜色搜索样式 */
        .search-section {
            margin-bottom: 25px;
        }
        
        .search-box {
            display: flex;
            gap: 10px;
        }
        
        .search-input {
            flex: 1;
        }
        
        .search-btn {
            padding: 0 25px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .search-btn:hover {
            background: linear-gradient(135deg, #2980b9, #3498db);
        }
        
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .color-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }
        
        .color-card:hover {
            transform: translateY(-5px);
        }
        
        .color-preview-small {
            height: 100px;
            width: 100%;
        }
        
        .color-info {
            padding: 15px;
        }
        
        .color-name-large {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }
        
        .color-rgb {
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .input-section {
                flex-direction: column;
            }
            
            .color-input, .color-preview {
                min-width: 100%;
            }
            
            .color-ratios {
                gap: 15px;
            }
            
            .color-item {
                width: 110px;
            }
            
            .color-grid {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>水性漆调色助手</h1>
            <p class="description">输入您想要调配的颜色RGB值，系统将自动计算红、黄、蓝、黑、白五种基础色的混合比例</p>
        </header>
        
        <div class="tabs">
            <button class="tab active" data-tab="mixer">调色器</button>
            <button class="tab" data-tab="search">颜色搜索</button>
        </div>
        
        <!-- 调色器标签页 -->
        <div class="tab-content active" id="mixer">
            <div class="input-section">
                <div class="color-input">
                    <div class="input-group">
                        <label for="red">红色 (R)</label>
                        <input type="number" id="red" min="0" max="255" value="120">
                    </div>
                    <div class="input-group">
                        <label for="green">绿色 (G)</label>
                        <input type="number" id="green" min="0" max="255" value="80">
                    </div>
                    <div class="input-group">
                        <label for="blue">蓝色 (B)</label>
                        <input type="number" id="blue" min="0" max="255" value="200">
                    </div>
                    <button class="btn" id="calculate-btn">计算调色比例</button>
                </div>
                
                <div class="color-preview">
                    <div class="color-display" id="target-color"></div>
                    <div class="rgb-display" id="rgb-values">RGB(120, 80, 200)</div>
                </div>
            </div>
            
            <div class="result-section" id="result-section">
                <h2 class="result-title">调色配方</h2>
                
                <div class="color-ratios">
                    <div class="color-item">
                        <div class="color-swatch" style="background-color: #e74c3c;"></div>
                        <div class="color-name">红色</div>
                        <div class="color-percentage" id="red-percent">0%</div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background-color: #f1c40f;"></div>
                        <div class="color-name">黄色</div>
                        <div class="color-percentage" id="yellow-percent">0%</div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background-color: #3498db;"></div>
                        <div class="color-name">蓝色</div>
                        <div class="color-percentage" id="blue-percent">0%</div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background-color: #2c3e50;"></div>
                        <div class="color-name">黑色</div>
                        <div class="color-percentage" id="black-percent">0%</div>
                    </div>
                    <div class="color-item">
                        <div class="color-swatch" style="background-color: #ecf0f1; border: 1px solid #bdc3c7;"></div>
                        <div class="color-name">白色</div>
                        <div class="color-percentage" id="white-percent">0%</div>
                    </div>
                </div>
                
                <div class="mixing-instructions">
                    <h3 class="instructions-title">调色指导</h3>
                    <ul class="instructions-list" id="instructions">
                        <!-- 动态生成指导内容 -->
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 颜色搜索标签页 -->
        <div class="tab-content" id="search">
            <div class="search-section">
                <div class="search-box">
                    <div class="search-input">
                        <input type="text" id="color-search" placeholder="搜索颜色名称，例如：紫色、天蓝色、珊瑚红...">
                    </div>
                    <button class="search-btn" id="search-btn">搜索</button>
                </div>
            </div>
            
            <div class="color-grid" id="color-grid">
                <!-- 颜色卡片将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <div class="footer">
            <p>水性漆调色助手 &copy; 2023 | 使用前建议先在小样上测试颜色效果</p>
        </div>
    </div>

    <script>
        // 颜色数据库
        const colorDatabase = [
            { name: "红色", rgb: "255, 0, 0" },
            { name: "深红色", rgb: "139, 0, 0" },
            { name: "粉红色", rgb: "255, 192, 203" },
            { name: "橙色", rgb: "255, 165, 0" },
            { name: "黄色", rgb: "255, 255, 0" },
            { name: "浅黄色", rgb: "255, 255, 224" },
            { name: "绿色", rgb: "0, 128, 0" },
            { name: "浅绿色", rgb: "144, 238, 144" },
            { name: "蓝色", rgb: "0, 0, 255" },
            { name: "天蓝色", rgb: "135, 206, 235" },
            { name: "深蓝色", rgb: "0, 0, 139" },
            { name: "紫色", rgb: "128, 0, 128" },
            { name: "浅紫色", rgb: "216, 191, 216" },
            { name: "棕色", rgb: "165, 42, 42" },
            { name: "灰色", rgb: "128, 128, 128" },
            { name: "黑色", rgb: "0, 0, 0" },
            { name: "白色", rgb: "255, 255, 255" },
            { name: "珊瑚红", rgb: "255, 127, 80" },
            { name: "青色", rgb: "0, 255, 255" },
            { name: "金色", rgb: "255, 215, 0" },
            { name: "银色", rgb: "192, 192, 192" },
            { name: "橄榄色", rgb: "128, 128, 0" },
            { name: "栗色", rgb: "128, 0, 0" },
            { name: "海军蓝", rgb: "0, 0, 128" },
            { name: "青绿色", rgb: "64, 224, 208" },
            { name: "紫罗兰色", rgb: "238, 130, 238" },
            { name: "米色", rgb: "245, 245, 220" },
            { name: "象牙色", rgb: "255, 255, 240" },
            { name: "薰衣草紫", rgb: "230, 230, 250" },
            { name: "玫瑰红", rgb: "255, 0, 127" },
            { name: "番茄红", rgb: "255, 99, 71" },
            { name: "巧克力色", rgb: "210, 105, 30" },
            { name: "蓝绿色", rgb: "0, 128, 128" },
            { name: "深紫色", rgb: "75, 0, 130" },
            { name: "柠檬绿", rgb: "50, 205, 50" }
        ];

        document.addEventListener('DOMContentLoaded', function() {
            const redInput = document.getElementById('red');
            const greenInput = document.getElementById('green');
            const blueInput = document.getElementById('blue');
            const calculateBtn = document.getElementById('calculate-btn');
            const targetColor = document.getElementById('target-color');
            const rgbValues = document.getElementById('rgb-values');
            const resultSection = document.getElementById('result-section');
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            const searchInput = document.getElementById('color-search');
            const searchBtn = document.getElementById('search-btn');
            const colorGrid = document.getElementById('color-grid');
            
            // 初始化显示目标颜色
            updateColorPreview();
            
            // 输入变化时更新颜色预览
            [redInput, greenInput, blueInput].forEach(input => {
                input.addEventListener('input', updateColorPreview);
            });
            
            // 计算按钮点击事件
            calculateBtn.addEventListener('click', calculateRatios);
            
            // 标签页切换
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabId = tab.getAttribute('data-tab');
                    
                    // 更新活动标签
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 显示对应内容
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        if (content.id === tabId) {
                            content.classList.add('active');
                        }
                    });
                });
            });
            
            // 搜索功能
            searchBtn.addEventListener('click', searchColors);
            searchInput.addEventListener('keyup', (e) => {
                if (e.key === 'Enter') {
                    searchColors();
                }
            });
            
            // 初始化颜色网格
            displayColors(colorDatabase);
            
            function updateColorPreview() {
                const r = redInput.value;
                const g = greenInput.value;
                const b = blueInput.value;
                
                targetColor.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                rgbValues.textContent = `RGB(${r}, ${g}, ${b})`;
            }
            
            function calculateRatios() {
                const r = parseInt(redInput.value);
                const g = parseInt(greenInput.value);
                const b = parseInt(blueInput.value);
                
                // 验证输入值
                if (isNaN(r) || isNaN(g) || isNaN(b) || 
                    r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
                    alert('请输入有效的RGB值（0-255之间的整数）');
                    return;
                }
                
                // 使用改进的调色算法
                const ratios = calculateColorRatios(r, g, b);
                
                // 更新UI显示
                document.getElementById('red-percent').textContent = ratios.red + '%';
                document.getElementById('yellow-percent').textContent = ratios.yellow + '%';
                document.getElementById('blue-percent').textContent = ratios.blue + '%';
                document.getElementById('white-percent').textContent = ratios.white + '%';
                document.getElementById('black-percent').textContent = ratios.black + '%';
                
                // 生成调色指导
                generateInstructions(ratios);
                
                // 显示结果区域
                resultSection.style.display = 'block';
                
                // 滚动到结果区域
                resultSection.scrollIntoView({ behavior: 'smooth' });
            }
            
            function calculateColorRatios(r, g, b) {
                // 改进的调色算法
                // 计算颜色的HSV值
                const max = Math.max(r, g, b);
                const min = Math.min(r, g, b);
                const delta = max - min;
                
                // 计算亮度（Value）
                const v = max / 255;
                
                // 计算饱和度（Saturation）
                const s = max === 0 ? 0 : delta / max;
                
                // 计算色调（Hue）
                let h = 0;
                if (delta !== 0) {
                    if (max === r) h = ((g - b) / delta) % 6;
                    else if (max === g) h = (b - r) / delta + 2;
                    else h = (r - g) / delta + 4;
                }
                h = Math.round(h * 60);
                if (h < 0) h += 360;
                
                // 根据HSV值计算基础色比例
                let redRatio = 0, yellowRatio = 0, blueRatio = 0;
                
                // 根据色调分配红、黄、蓝的比例
                if (h >= 0 && h < 60) {
                    // 红色到黄色
                    redRatio = 1 - (h / 60);
                    yellowRatio = h / 60;
                } else if (h >= 60 && h < 120) {
                    // 黄色到绿色
                    yellowRatio = 1 - ((h - 60) / 60);
                    // 绿色需要黄色和蓝色混合
                    blueRatio = (h - 60) / 60;
                } else if (h >= 120 && h < 180) {
                    // 绿色到青色
                    yellowRatio = (h - 120) / 60;
                    blueRatio = 1 - ((h - 120) / 60);
                } else if (h >= 180 && h < 240) {
                    // 青色到蓝色
                    blueRatio = 1 - ((h - 180) / 60);
                    // 青色需要蓝色和少量红色
                    redRatio = (h - 180) / 60;
                } else if (h >= 240 && h < 300) {
                    // 蓝色到紫色
                    blueRatio = 1 - ((h - 240) / 60);
                    redRatio = (h - 240) / 60;
                } else {
                    // 紫色到红色
                    redRatio = 1 - ((h - 300) / 60);
                    blueRatio = (h - 300) / 60;
                }
                
                // 根据饱和度调整颜色强度
                redRatio *= s;
                yellowRatio *= s;
                blueRatio *= s;
                
                // 计算黑白比例
                const whiteRatio = v * (1 - s);
                const blackRatio = 1 - v;
                
                // 归一化处理，确保总和为100%
                const total = redRatio + yellowRatio + blueRatio + whiteRatio + blackRatio;
                const scale = 100 / total;
                
                return {
                    red: Math.round(redRatio * scale),
                    yellow: Math.round(yellowRatio * scale),
                    blue: Math.round(blueRatio * scale),
                    white: Math.round(whiteRatio * scale),
                    black: Math.round(blackRatio * scale)
                };
            }
            
            function generateInstructions(ratios) {
                const instructionsList = document.getElementById('instructions');
                instructionsList.innerHTML = '';
                
                // 根据比例生成指导内容
                const instructions = [
                    `首先取白色水性漆作为基色，占总量的 ${ratios.white}%`,
                    `加入红色水性漆，占总量的 ${ratios.red}%`,
                    `加入黄色水性漆，占总量的 ${ratios.yellow}%`,
                    `加入蓝色水性漆，占总量的 ${ratios.blue}%`,
                    `最后加入黑色水性漆调整明暗，占总量的 ${ratios.black}%`,
                    `按照从浅到深的顺序添加颜料，每添加一种颜色后充分搅拌均匀`,
                    `建议先在小样上测试颜色效果，如需调整可逐步微调各颜色比例`,
                    `注意：实际调色效果可能因颜料品牌、批次和底材不同而有所差异`
                ];
                
                instructions.forEach(instruction => {
                    const li = document.createElement('li');
                    li.textContent = instruction;
                    instructionsList.appendChild(li);
                });
            }
            
            function displayColors(colors) {
                colorGrid.innerHTML = '';
                
                colors.forEach(color => {
                    const colorCard = document.createElement('div');
                    colorCard.className = 'color-card';
                    colorCard.innerHTML = `
                        <div class="color-preview-small" style="background-color: rgb(${color.rgb})"></div>
                        <div class="color-info">
                            <div class="color-name-large">${color.name}</div>
                            <div class="color-rgb">RGB(${color.rgb})</div>
                        </div>
                    `;
                    
                    // 点击颜色卡片事件
                    colorCard.addEventListener('click', () => {
                        const rgbValues = color.rgb.split(',').map(val => parseInt(val.trim()));
                        redInput.value = rgbValues[0];
                        greenInput.value = rgbValues[1];
                        blueInput.value = rgbValues[2];
                        
                        updateColorPreview();
                        
                        // 切换到调色器标签页
                        document.querySelector('[data-tab="mixer"]').click();
                        
                        // 计算调色比例
                        calculateRatios();
                    });
                    
                    colorGrid.appendChild(colorCard);
                });
            }
            
            function searchColors() {
                const query = searchInput.value.trim().toLowerCase();
                
                if (query === '') {
                    displayColors(colorDatabase);
                    return;
                }
                
                const filteredColors = colorDatabase.filter(color => 
                    color.name.toLowerCase().includes(query)
                );
                
                if (filteredColors.length === 0) {
                    colorGrid.innerHTML = '<p style="grid-column: 1 / -1; text-align: center; padding: 20px;">未找到匹配的颜色，请尝试其他关键词</p>';
                } else {
                    displayColors(filteredColors);
                }
            }
        });
    </script>
</body>
</html>